<template>
	<view class="container">
		<view class="v-form">
			<view class="v-form-item">
				<uni-icons type="phone" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input type="text" v-model="Account" class="input-form-item" placeholder="请输入手机号" placeholder-class="input-form-item-holder" />
			</view>
			<view class="v-form-item">
				<uni-icons type="auth" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input type="text" v-model="ValidCode" class="input-form-item" placeholder="请输入验证码" placeholder-class="input-form-item-holder" />
				<button type="default" class="button-form-item" @click="getValidCode">获取验证码</button>
			</view>
			<view class="v-form-item">
				<uni-icons type="person" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input v-model="NickName" class="input-form-item" placeholder="请输入昵称" placeholder-class="input-form-item-holder" />
			</view>
			<view class="v-form-item">
				<uni-icons type="undo" class="icon-form-item" size="20" color="#000"></uni-icons>
				<!-- <input v-model="InviteCode" class="input-form-item" placeholder="请输入邀请码" placeholder-class="input-form-item-holder" /> -->
				<view class="input-form-item">{{InviteCode}}</view>
			</view>
			<view class="v-form-item">
				<uni-icons type="locked" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input v-model="Password" class="input-form-item" placeholder="请输入登录密码" placeholder-class="input-form-item-holder" password="true" />
			</view>
			<view class="v-form-item">
				<uni-icons type="locked" class="icon-form-item" size="20" color="#000"></uni-icons>
				<input v-model="ConfirmPassword" class="input-form-item" placeholder="请重复输入登录密码" placeholder-class="input-form-item-holder" password="true" />
			</view>
		</view>
		<view class="v-footer-op">
			<view  class="v-footer-op-left" @click="cancel">取消</view>
			<view  class="v-footer-op-right" @click="save">保存</view>
		</view>

		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确定" title="提醒" :content="dialogMsg" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<view class="loading-mask" v-show="visibleLoading">
			<view class="loading">
				<view class="loading-icon">
					<view class="mesh-loader">
						<view class="set-one circlegroup">
							<view class="circle"></view>
							<view class="circle"></view>
						</view>
						<view class="set-two circlegroup">
							<view class="circle"></view>
							<view class="circle"></view>
						</view>
					</view>
				</view>
				<!-- <div class="loading-title">下发中，请稍后...</div> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Account: '',
			ValidCode: '',
			NickName: '',
			InviteCode: '',
			Password: '',
			ConfirmPassword: '',

			messageText: '',
			msgType: 'success',
			duration: 2000,

			visibleLoading: false
		};
	},
	methods: {
		showLoading() {
			this.visibleLoading = true;
		},
		hideLoading() {
			this.visibleLoading = false;
		},

		dialogConfirm() {
			console.log('点击确认');
			this.serverConfig();
		},
		dialogClose() {
			console.log('点击关闭');
		},
		getValidCode: function () {
			let _this = this;
			if (!_this.Account) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入账号（手机号）',
					icon: 'error'
				});
				return false;
			}
			let userData = {
				Account: _this.Account,
			};
			
			//正式代码
			uni.request({
				url: _this.sysInfo.BasePath + 'Auth/GetValidCode',
				method: 'Post',
				data: userData,
				header: {
					'content-type': 'application/json'
				},
				success: (res) => {
					if (res && res.data && res.data.Succeeded === true) {
						_this.sysUtils.tip({
							sender: _this,

							title: '验证码已发送请注意查看！',
							icon: 'info'
						});
					} else {
						_this.sysUtils.tip({
							sender: _this,

							title: '获取验证码失败！',
							icon: 'error'
						});
					}
				},
				fail: () => {
					_this.sysUtils.tip({
						sender: _this,
						title: '获取验证码失败！',
						icon: 'error'
					});
				},
				complete: () => {
					_this.sysUtils.hideLoading(_this);
				}
			});
		},
		save: function () {
			let _this = this;
			try {
				if (_this.sysInfo && _this.sysInfo.BasePath) {
					if (_this.validForm()) {
						let userData = {
							Account: _this.Account,
							ValidCode: _this.ValidCode,
							NickName: _this.NickName,
							InviteCode: _this.InviteCode,
							Password: _this.Password
						};
						_this.sysUtils.showLoading(_this);
						//正式代码
						uni.request({
							url: _this.sysInfo.BasePath + 'Auth/Register',
							method: 'Post',
							data: userData,
							header: {
								'content-type': 'application/json'
							},
							success: (res) => {
								if (res && res.data ) {
									if ( res.data.Succeeded === true) {
										uni.reLaunch({
											url:"/pages/account/login"
										});
									}else{
										
										_this.sysUtils.tip({
											sender: _this,
										
											title: '注册失败！'+res.data.Errors,
											icon: 'error'
										});
									}
									
								} else {
									_this.sysUtils.tip({
										sender: _this,

										title: '注册失败！',
										icon: 'error'
									});
								}
							},
							fail: () => {
								_this.sysUtils.tip({
									sender: _this,
									title: '注册失败！',
									icon: 'error'
								});
							},
							complete: () => {
								_this.sysUtils.hideLoading(_this);
							}
						});
					}
				} else {
					this.dialogMsg = `注册失败`;
					this.$refs.alertDialog.open();
				}
			} catch (error) {
				_this.sysUtils.hideLoading(_this);
				// 异常处理逻辑
				_this.sysUtils.tip({
					sender: _this,
					title: '注册失败！',
					icon: 'error'
				});
			}
		},
		cancel: function () {
			uni.reLaunch({
				url:"/pages/account/login"
			});
		},
		validForm: function () {
			let _this = this;
			if (!_this.Account) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入手机号',
					icon: 'error'
				});
				return false;
			}
			if (!_this.ValidCode) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入验证码',
					icon: 'error'
				});
				return false;
			}
			if (!_this.NickName) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入昵称',
					icon: 'error'
				});
				return false;
			}
			if (!_this.InviteCode) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入邀请码',
					icon: 'error'
				});
				return false;
			}
			if (!_this.Password) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入密码',
					icon: 'error'
				});
				return false;
			}
			if (!_this.ConfirmPassword) {
				_this.sysUtils.tip({
					sender: _this,
					title: '请输入确认密码',
					icon: 'error'
				});
				return false;
			}

			if (_this.ConfirmPassword !== _this.Password) {
				_this.sysUtils.tip({
					sender: _this,
					title: '密码与确认密码不一致',
					icon: 'error'
				});
				return false;
			}

			return true;
		},
		init() {
			let _this = this;
		}
	},
	onLoad(options) {
		let _this = this;
		_this.InviteCode = options.invitecode;

		_this.init();
		// options 包含了查询参数
		console.log(_this.InviteCode);
	},
	created() {
		let _this = this;
		_this.init();
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	padding: 0rpx;
	margin: 0;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}

.txt-title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 50rpx;
	color: #ffffff;
}

.v-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	align-self: stretch;
	margin: 20rpx;
	background-color: #fff;
	padding: 30rpx;
	border-radius: 30rpx;
	padding-top: 50rpx;
}

.v-form-title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 32rpx;
	font-weight: bold;
}

.v-form-item {
	display: flex;
	flex-direction: row;
	height: 50rpx;
	align-items: center;
	padding: 20rpx 0;
	background-color: #f4f4f4;
	border-radius: 50rpx;
	margin-top: 30rpx;
	color: #000;
}

.icon-form-item {
	margin-left: 30rpx;
}

.v-form-item-left {
	display: flex;
	flex-direction: row;
	height: 60rpx;
	margin: 15rpx 0;
	justify-content: flex-start;
	align-items: center;
}

.button-form-item {
	background-color: #fff;
	width: 200rpx;
	height: 60rpx;
	border-radius: 50rpx;
	border: 1rpx solid #ce4d0e;
	color: #ce4d0e !important;
	font-size: 26rpx;
	margin-right: 20rpx !important;
}

.input-form-item {
	color: #000;
	margin: 0 20rpx;
	font-size: 32rpx;
	flex: 1;
}

.input-form-item-holder {
	color: #ffffff;
	font-size: 32rpx;
}

.btn-from-item {
	margin-top: 35rpx;
	color: #fff !important;
	width: 100%;
	font-size: 32rpx;
	background-color: #466cff !important;
	word-spacing: 20rpx !important;
	border-radius: 50rpx;
}

.btn-form-item-value {
}

::v-deep .uni-label-pointer {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.image-otherlogin {
	height: 80rpx;
	width: 80rpx;
	margin-top: 20rpx;
}

/* #ifdef H5 */
.pop-msg {
	margin-top: -60rpx;
}

/* #endif */
/* #ifdef APP-PLUS */
.pop-msg {
	margin-top: 80rpx;
}

/* #endif */

.v-footer-title {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	color: #989898;
	font-size: 26rpx;
	background-color: #fff;
	letter-spacing: 2rpx;
	z-index: 20;
	align-self: center;
	padding: 0 20rpx;
	margin-top: 50rpx;
}

.v-prefix {
	font-size: 26rpx;
	font-weight: bold;
}

.input-form {
	font-size: 26rpx;
	margin-left: 20rpx;
}

.input-form-item-holder {
	color: #cccccc;
}

.v-footer-op {
	position: fixed;
	z-index: 100;
	height: 150rpx;
	width: 100%;
	display: flex;
	flex-direction: row;
	bottom: 0;
	border-radius: 10rpx 10rpx 0 0;
	box-shadow: 1rpx 1rpx 20rpx #ccc;
	justify-content: center;
	align-items: center;
}

.v-footer-op .v-footer-op-left,
.v-footer-op .v-footer-op-right {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: white;
}

.v-footer-op-left {
	background-color: #fff;
	width: 30%;
	height: 80rpx;
	border-radius: 50rpx;
	border: 1rpx solid #ce4d0e;
	color: #ce4d0e !important;
}

.v-footer-op-right {
	background-color: #ce4d0e;
	width: 30%;
	height: 80rpx;
	border-radius: 50rpx;
	margin-left: 30rpx;
}
</style>
